<template>
    <view class="container">
        <block v-if="addressInfo">
            <address-item :item="addressInfo" @onTap="selectAddress" ></address-item>
        </block>
        <block v-else>
            <u-cell
                :isLink="true"
                size="large"
                rightIconStyle="font-size: 44rpx"
                @click="selectAddress"
            >
                <view class="cell-title" slot="title">
                    <u--text
                        text="请选择地址"
                        size="32rpx"
                        bold
                    ></u--text>
                </view>
            </u-cell>
        </block>
        <view class="order-info">
            <view class="order-status">
                <view class="icon">
                    <u-icon
                        name="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_time.png"
                        size="42rpx"
                    ></u-icon>
                </view>
                <view class="text">
                    <u--text
                        text="等待支付"
                        size="38rpx"
                    ></u--text>
                </view>
            </view>
            <view class="price">
                <text>¥</text>
                <text>{{ order.payPrice }}</text>
            </view>
            <view class="mt-50">
                <order-product :product="product"></order-product>
            </view>
        </view>
        <!--view class="tips">
            平台支持微信支付
        </view-->
        <view class="bottom">
            <u-button
                text="确认支付"
                class="custom-style"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff'
                }"
                :throttleTime="1500"
                @click="onsumbit"
            ></u-button>
        </view>
        <u-toast ref="uToast"></u-toast>
        <pay-platform
            :sheetShow="sheetShow"
            :orderId="sheetData.orderId"
            :payPrice="sheetData.payPrice"
            :orderType="sheetData.orderType"
            @pay="payCallback"
            @close="closeSheet"
        ></pay-platform>
    </view>
</template>
<script>
import AddressItem from "@/components/AddressItem"
import OrderProduct from "@/components/OrderProduct"
import { confirmOrder, createOrder } from "@/config/api"
import { wechatOrderPay } from "@/config/api-java"
import PayPlatform from "@/components/PayPlatform"
export default {
    components: {
        AddressItem,
        OrderProduct,
        PayPlatform
    },
    data() {
        return {
            order: {},
            product: {},
            address: null,
            confirm: null,
            cartId: null,
            sheetShow: false,
            sheetData: {
                orderId: null,
                payPrice: null,
                orderType: 'order'
            }
        }
    },
    onLoad(option) {
        this.cartId = option.cartId
        this.getData(option)
    },
    computed: {
        addressInfo() {
            return this.$store.getters.address
        }
    },
    methods: {
        async getData(query) {
            const res = await confirmOrder(query)
            this.address = res.address
            this.order = res.order
            this.product = res.product
            this.$store.dispatch("user/selectAddress", res.address)
        },
        selectAddress() {
            uni.$u.route({
                url: 'pages/address/index',
                params: {
                    select: 1
                }
            })
        },
        async onsumbit() {
            if (!this.$store.getters.address) {
                this.$refs.uToast.show({
                    type: 'default',
                    message: "请选择地址"
                })
                return
            }
            uni.showLoading({
                title: '正在生成订单'
            })
            if (!this.confirm) {
                this.confirm = await createOrder({
                    id: this.product.productId,
                    skuId: this.product.skuId,
                    addressId: this.$store.getters.address.id,
                    number: this.product.number,
                    cartId: this.cartId? this.cartId:null
                })
            }
            uni.hideLoading()
            this.sheetData = {
                orderId: this.confirm.id,
                payPrice: this.confirm.payPrice,
                orderType: "order"
            }
            this.sheetShow = true
        },
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
				params
			})
        },
        payCallback(res) {
            this.sheetShow = false
            if (res) {
                if (res.orderType == 'grab') {
                    var params = {
                        grabId: res.id
                    }
                } else if (res.orderType == 'order') {
                    var params = {
                        orderId: res.id
                    }
                }
                this.navigateTo("pages/orderComplete/index", params)
            }
        },
        closeSheet() {
            this.sheetShow = false
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .order-info {
            margin-top: 60rpx;
            .order-status {
                display: flex;
                justify-content: center;
                align-items: center;
                .text {
                    margin-left: 10rpx;
                }
            }
            .price {
                font-size: 58rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #000000;
                text-align: center;
                margin-top: 20rpx;
                text {
                    &:nth-child(1) {
                        font-size: 44rpx;
                    }
                    &:nth-child(2) {
                        font-size: 58rpx;
                    }
                }
            }
            .mt-50 {
                margin-top: 50rpx;
            }
        }
        .tips {
            margin-top: 160rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            text-align: center;
        }
        .bottom {
            position: fixed;
            box-sizing: border-box;
            width: 100%;
            padding: 0 20rpx;
            bottom: 33rpx;
            left: 0;
        }
    }
</style>
